<template>
	<view class="second-page">
		<u-navbar title="AI创作" :autoBack="true" :placeholder="true">
			<view slot="right">
				<u--image :showLoading="true" mode="aspectFit" src="/static/home/share.png" width="38rpx" height="38rpx"
					@click="gonav"></u--image>
			</view>
		</u-navbar>
		<view class="title">
			<view class="title-text">
				· 模型主题
			</view>
			<u--image @click="clickopen(1)" :showLoading="true" src="/static/home/mark.png" width="34rpx"
				height="34rpx"></u--image>
		</view>
		<view class="theme">
			<view class="item" :class="item.stutas == false?'theme-item':'active-item'"
				v-for="(item,index) in themeList" :key="index" @click="clickTheme(index)">
				<view class="tsimg">
					<u--image :showLoading="true" :src="item.img" width="220rpx" height="220rpx"></u--image>
				</view>
				<view class="item-text">
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="title">
			<view class="title-text">
				· 风格选择
			</view>
			<u--image @click="clickopen(2)" :showLoading="true" src="/static/home/mark.png" width="34rpx"
				height="34rpx"></u--image>
		</view>
		<view class="tone">
			<view class="item" :class="item.name !== selectType?'tone-item':'active-tone'"
				v-for="(item,index) in toneList" :key="index" @click="selectType = item.name">
				{{item.name}}
			</view>
		</view>
		<view class="btn">
			<u-button @click="gonext" color="#333333" shape="circle" size="large" type="primary" text="立即生成"></u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center" round="15">
			<view class="tips">
				<view class="tips-title">
					{{tipsTitle}}
				</view>
				<view class="tips-text">
					{{tipsText}}
				</view>
				<u-button @click="close" color="#333333" shape="circle" type="primary" text="知道了"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				themeList: [{
						text: '通用',
						img: '/static/home/preempt5.png',
						stutas: true,
					},
					{
						text: '科幻',
						img: '/static/home/model8.png',
						stutas: false
					},
					{
						text: '儿童3D',
						img: '/static/home/model4.png',
						stutas: false
					},
					{
						text: '建筑设计',
						img: '/static/home/model7.png',
						stutas: false
					},
					{
						text: '2.5D动漫',
						img: '/static/home/model1.png',
						stutas: false
					},
					{
						text: '电影写实',
						img: '/static/home/model10.png',
						stutas: false
					},
					{
						text: '人物写真',
						img: '/static/home/model11.png',
						stutas: false
					},
					{
						text: '3D日漫',
						img: '/static/home/model9.png',
						stutas: false
					},
					{
						text: 'CG写真',
						img: '/static/home/model5.png',
						stutas: false
					}
				],
				info:{},
				imageInfo:{},
				selectType: '',
				toneList: [],
				tipsTitle: '模型主题',
				tipsText: '通过模型主题设定，可以设定最终生成出来的画面是什么材质和风格。'
			}
		},
		onLoad() {
			this.imageInfo = uni.getStorageSync("imageInfo")
			this.getUserInfo()
			this.getCateList()
		},
		methods: {
			getUserInfo() {
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.info = res.data.data
					}
				})
			},
			getCateList() {
				this.$Request({
					method: 'POST',
					url: '/index/getCateList'
				}).then(res => {
					if (res.data.code == 1) {
						this.toneList = res.data.data
						if (res.data.data.length > 0) {
							this.selectType = res.data.data[0].name
						}
					}
				})
			},
			gonext() {
				if (this.imageInfo.num > this.info.ai_score) {
					uni.showToast({
						title: '您的积分不足！',
						icon: 'none'
					})
					return
				}
				const obj = this.themeList.find(e => e.stutas == true)
				uni.navigateTo({
					url: `/pages/index/third/index?theme=${obj.text}&type=${this.selectType}`
				})
			},
			gonav() {
				uni.navigateTo({
					url: '/pages/my/works/index'
				})
			},
			clickopen(e) {
				if (e == 1) {
					this.tipsTitle = '模型主题'
					this.tipsText = '通过模型主题设定，可以设定最终生成出来的画面是什么材质和风格。'
				} else {
					this.tipsTitle = '风格选择'
					this.tipsText = '包含风格修饰、艺术家、元素魔法'
				}
				this.show = true
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			clickTheme(index) {
				this.themeList.map(item => {
					item.stutas = false
				})
				this.themeList[index].stutas = true
			},
			clickTone(index) {
				this.toneList.map(item => {
					item.stutas = false
				})
				this.toneList[index].stutas = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.second-page {
		padding: 0 30rpx;

		.title {
			margin-top: 20rpx;
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;

			.title-text {
				margin-right: 10rpx;
			}
		}

		.theme {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.item {
				margin-top: 20rpx;
				position: relative;
				border-radius: 38rpx;
			}

			.theme-item {
				border: 8rpx solid transparent;
			}

			.active-item {
				border: 8rpx solid #2fa2e3;
			}

			.tsimg {
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
			}



			.item-text {
				color: #ffffff;
				position: absolute;
				top: 12rpx;
				left: 12rpx;
				font-size: 28rpx;
				font-weight: 600;
			}
		}

		.tone {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			font-size: 28rpx;
			text-align: center;

			.item {
				width: 220rpx;
				margin-top: 30rpx;
				padding: 20rpx;
				border-radius: 10rpx;
			}

			.tone-item {
				background-color: #eaeaea;
			}

			.active-tone {
				background-color: #333333;
				color: #ffffff;
			}
		}

		.btn {
			margin-top: 60rpx;
		}

		.tips {
			width: 80vw;
			padding: 30rpx;
			text-align: center;

			.tips-title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
			}

			.tips-text {
				margin: 40rpx 0;
				font-size: 28rpx;
				color: #666666;
			}
		}

	}
</style>